<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/>
    <meta charset="UTF-8">
    <title>我的出入境证件</title>

    <link rel="stylesheet" href="/css/weui.css"/>
    <link rel="stylesheet" href="/css/main.css"/>


    <script src="/js/vue.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/jquery-3.3.1.min.js"></script>

    <style>
        .paper {
            background: transparent url("/images/bg_ga.png") no-repeat;
            background-size: cover;
            margin: 10px 3%;
            box-shadow: 0 1px 2px 1px rgba(51, 51, 51, 0.1), 1px 3px 4px 2px rgba(51, 51, 51, 0.07);
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            padding: 2% 4%;
            height: 54vw;
        }

        .paper_ga {
            background-image: url("/images/bg_ga.png");
        }

        .paper_hz {
            background-image: url("/images/bg_hz.png");
        }

        .paper_tw {
            background-image: url("/images/bg_tw.png");
        }

        .paper_row {
            display: flex;
            flex-direction: row;
        }

        .paper_item {
        }

        .paper_type_name {
            color: #000068;
            font-size: 20px;
            font-size: 20 px;
            vertical-align: center;
            display: flex;
            flex-direction: row;
            align-items: center;
            flex: 3;
        }

        .paper_number {
            display: flex;
            flex-direction: row;
            padding-top: 20px;
            flex: 2;
        }

        .paper_name {
            font-size: 18px;
            font-size: 18px;
        }

        .paper_item {
            display: flex;
            flex-direction: column;
        }

        .paper_item_title {
            flex: 1;
            font-size: 12px;
            font-size: 12px;
            color: #000068;
            display: flex;
            flex-direction: column;
        }

        .paper_item_value {
            flex: 2;
            font-size: 16x;
            font-size: 16px;
            color: #333333;
            display: flex;
            flex-direction: column;
        }

        .char{height: 18px;width: 12px;background: url("/images/char.png") no-repeat;background-size: 423px 18px;}
        .char_A{background-position: -1px 0px;}
        .char_B{background-position: -13px 0px;}
        .char_C{background-position: -25px 0px;}
        .char_D{background-position: -37px 0px;}
        .char_E{background-position: -49px 0px;}
        .char_F{background-position: -60px 0px;width: 11px;}
        .char_G{background-position: -70px 0px;width: 13px;}
        .char_H{background-position: -84px 0px;}
        .char_I{background-position: -96px 0px;width: 10px;}
        .char_J{background-position: -105px 0px;width: 11px;}
        .char_K{background-position: -115px 0px;}
        .char_L{background-position: -126px 0px;width: 11px;}
        .char_M{background-position: -136px 0px;width: 16px;}
        .char_N{background-position: -153px 0px;width: 13px;}
        .char_O{background-position: -166px 0px;width: 14px}
        .char_P{background-position: -180px 0px;}
        .char_Q{background-position: -191px 0px;width: 14px;}
        .char_R{background-position: -205px 0px;width: 10px}
        .char_S{background-position: -215px 0px;}
        .char_T{background-position: -226px 0px;}
        .char_U{background-position: -238px 0px;}
        .char_V{background-position: -250px 0px;}
        .char_W{background-position: -262px 0px;width: 18px;}
        .char_X{background-position: -280px 0px; }
        .char_Y{background-position: -291px 0px;}
        .char_Z{background-position: -303px 0px;}
        .char_1{background-position: -314px 0px;width: 10px;}
        .char_2{background-position: -325px 0px;width: 11px;}
        .char_3{background-position: -335px 0px;width: 11px;}
        .char_4{background-position: -346px 0px;width: 12px;}
        .char_5{background-position: -357px 0px;width: 11px;}
        .char_6{background-position: -368px 0px;width: 11px;}
        .char_7{background-position: -379px 0px;width: 11px;}
        .char_8{background-position: -390px 0px;width: 11px;}
        .char_9{background-position: -400px 0px;width: 11px;}
        .char_0{background-position: -411px 0px;width: 11px;}




    </style>
</head>
<body>
<div id="app">


    <div v-bind:class="['paper',{'paper_ga':p.zjzl=='21'},{'paper_hz':p.zjzl=='14'},{'paper_tw':p.zjzl=='25'}]"
         v-for="p in paperList">
        <div class="paper_row" style="flex: 3;">
            <div class="paper_type_name">{{p.paperName}}</div>
            <div class="paper_number">
                <span v-for="c in p.zjhm" v-bind:class="['char','char_'+c]"></span>

            </div>
        </div>
        <div class="paper_row" style="flex: 2">
            <div class="paper_name">
                {{p.zwxm}}
            </div>
        </div>
        <div class="paper_row" style="flex: 3">
            <div class="paper_item" style="flex: 2;">
                <div class="paper_item_title">出生日期</div>
                <div class="paper_item_value">{{p.csrqName}}</div>
            </div>
            <div class="paper_item" style="flex:3;">
                <div class="paper_item_title">性别</div>
                <div class="paper_item_value">{{p.xbName}}</div>
            </div>
        </div>
        <div class="paper_row" style="flex: 3">
            <div class="paper_item">
                <div class="paper_item_title">有效期限</div>
                <div class="paper_item_value">{{p.yxqxName}}</div>
            </div>
        </div>
        <div class="paper_row" style="flex: 3">
            <div class="paper_item" style="flex: 2">
                <div class="paper_item_title"><span>签发机构</span></div>
                <div class="paper_item_value"><span>公安部出入境管理局</span></div>
            </div>
            <div class="paper_item" style="flex: 1">
                <div class="paper_item_title">签发地点</div>
                <div class="paper_item_value">{{p.qfdd}}</div>
            </div>
        </div>
    </div>
    <div v-bind:class="['weui-loadmore','weui-loadmore_line',{'hidden_div':loadMoreDisplay}]">
        <span class="weui-loadmore__tips">暂无数据</span>
    </div>

</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            paperList: []
        },
        created: function () {
            var that = this;
            $.post("/paper/list", {}, function (result) {
                that.paperList = result;

            });
        },
        computed: {
            loadMoreDisplay:function () {
                return this.paperList.length!=0;
            }
        }
    });

</script>
</body>
</html>